<template>
    <el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false"
               :close-on-press-escape="false">
        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()"
                 label-width="120px">
            <el-form-item prop="photoInfoList" :label="$t('photoinfo.images')">
                <el-upload
                        :action="uploadUrl"
                        multiple
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove"
                        :on-success="handleAvatarSuccess"
                        :file-list="photoList"
                >
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>
            <el-form-item prop="photoLabelList" :label="$t('photoinfo.labelName')">
                <el-select
                        v-model="dataForm.photoLabelList"
                        multiple
                        filterable
                        remote
                        placeholder="请输入关键词"
                        :remote-method="getphotoLabel"
                        :loading="loading">
                    <el-option
                            v-for="item in this.photoLabel"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <template slot="footer">
            <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
            <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
        </template>
    </el-dialog>
</template>

<script>
    import debounce from 'lodash/debounce'
    import Cookies from "js-cookie";

    export default {
        data() {
            return {
                visible: false,
                dataForm: {
                    photoInfoList: [],
                    photoLabelList: [],
                },
                dialogImageUrl: '',
                dialogVisible: false,
                uploadUrl: '',
                photoList: [],
                photoLabel: [],
                loading: false,

            }
        },
        computed: {
            dataRule() {
                return {
                    photoInfoList: [
                        {required: true, message: this.$t('validate.required'), trigger: 'blur'}
                    ],
                    photoLabelList: [
                        {required: true, message: this.$t('validate.required'), trigger: 'blur'}
                    ]
                }
            }
        },
        mounted() {
            // 初始化标签名称下拉框
            this.getphotoLabel('')
        },
        methods: {
            init() {
                this.uploadUrl = `${window.SITE_CONFIG['apiURL']}/photo/info/upload?token=${Cookies.get('token')}`
                this.$nextTick(() => {
                    this.$refs['dataForm'].resetFields()
                })
                this.dataForm.photoLabelList = []
                this.photoList = []
                this.visible = true
            },
            // 表单提交
            dataFormSubmitHandle: debounce(function () {
                this.$refs['dataForm'].validate((valid) => {
                    if (!valid) {
                        return false
                    }

                    this.$http['post']('/photo/info', this.dataForm).then(({data: res}) => {
                        if (res.code !== 0) {
                            return this.$message.error(res.msg)
                        }
                        this.$message({
                            message: this.$t('prompt.success'),
                            type: 'success',
                            duration: 500,
                            onClose: () => {
                                this.visible = false
                                this.$emit('refreshDataList')
                            }
                        })
                    }).catch(() => {
                    })
                })
            }, 1000, {'leading': true, 'trailing': false}),
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url
                this.dialogVisible = true
            },
            handleAvatarSuccess(res, file) {
                let photoInfo = {
                    name: file.name,
                    size: file.size,
                    downloadUrl: res.data.downloadUrl,
                  storagePath: res.data.storagePath
                }
                this.dataForm.photoInfoList.push(photoInfo)
            },
            getphotoLabel(query) {
                this.loading = true
                this.$http.get('/photo/label/select-options?query=' + query).then(({data: res}) => {
                    if (res.code !== 0) {
                        return this.$message.error(res.msg)
                    }
                    this.loading = false
                    this.photoLabel = res.data.labelSelectOptions
                }).catch(() => {
                })
            }
        }
    }
</script>

